<script setup lang="ts">
import { useRouter } from 'vue-router'
import axios from 'axios'
import { getArticle, open, openQQ } from '@/utils/publicMethods'
import useStore from '@/store'
import UserBasicCard from '@/components/user/UserBasicCard.vue'
import { UserBasic } from '@/api/type'

const store = useStore()
const router = useRouter()

const loading = ref(true)

// 一言文本
const yiyanStr = ref('')

/** 获取一言 */
function getYiyanStr() {
  // 先通过请求获取，拿不到就拿下面的
  axios.get('https://api.oick.cn/api/yiyan').then((res) => {
    if (res.status === 200) {
      yiyanStr.value = res.data
    }
  })
  const date = new Date()
  if (date.getHours() >= 6 && date.getHours() < 8) {
    return '晨起披衣出草堂，轩窗已自喜微凉🌅！'
  }
  if (date.getHours() >= 8 && date.getHours() < 12) {
    return '上午好🌞！'
  }
  if (date.getHours() >= 12 && date.getHours() < 18) {
    return '下午好☕！'
  }
  if (date.getHours() >= 18 && date.getHours() < 24) {
    return '晚上好🌃！'
  }
  if (date.getHours() >= 0 && date.getHours() < 6) {
    return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！'
  }
  return ''
}

/** 标签跳转 */
function cancelClick(path: any) {
  router.push(path).then(() => window.scroll(0, 0))
}

onMounted(() => {
  getYiyanStr()
})
</script>

<template>
  <el-space direction="vertical" fill size="large">
    <!--用户基础信息面板-->
    <UserBasicCard :user-basic="store.userBasic" />
    <!--每日一言-->
    <el-card class="box-card" shadow="hover" style="text-align: center">
      <template #header>
        <div>
          <svg-icon icon-class="day-yiyan"></svg-icon>
          每日一言
        </div>
      </template>
      {{ yiyanStr }}
    </el-card>
    <!--热门-->
    <el-card class="box-card" shadow="hover">
      <template #header>
        <h2 class="text-lg" style="margin: 0"><svg-icon icon-class="hot"></svg-icon> 热门</h2>
      </template>
      <div
        v-for="article in store.hotArticles"
        :key="article"
        v-loading="store.hotArticles ? false : loading"
        style="display: flex; margin-top: 16px"
      >
        <el-image
          fit="cover"
          :src="article.cover"
          class="image-hot"
          @click="getArticle(article.id)"
        />
        <div class="hot-item-info">
          <el-link :underline="false" class="hot-item-title">
            <span class="text-show" @click="getArticle(article.id)">
              {{ article.title }}
            </span>
          </el-link>
          <span v-if="article.createTime" class="text-xs font-number text-color hot-item-time">
            {{ article.createTime.replace('T', ' ') }}
          </span>
        </div>
      </div>
    </el-card>
    <!--标签-->
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <h2 class="text-lg" style="margin: 0"><svg-icon icon-class="tags"></svg-icon> 标签</h2>
          <el-link @click="cancelClick('/tags')">查看更多</el-link>
        </div>
      </template>
      <el-space wrap size="small">
        <div v-for="(tag, index) in store.tags" :key="tag.id">
          <el-button
            v-if="index < 10"
            text
            bg
            size="large"
            @click="cancelClick('/tags' + '?id=' + tag.id + '&name=' + tag.name)"
          >
            <svg-icon icon-class="label-sign"></svg-icon> {{ tag.name }}
            <div class="tags">{{ tag.articleCount }}</div>
          </el-button>
        </div>
      </el-space>
    </el-card>
  </el-space>
</template>

<style scoped>
.box-card {
  border-radius: 10px;
  border: 1px solid transparent;
  height: 100%;
}

.image-hot {
  border-radius: 10px;
  height: 80px;
  min-width: 140px;
  margin-right: 10px;
  &:hover {
    transform: scale(1.1);
  }
}
.hot-item-info {
  display: flex;
  flex-direction: column;
}
.hot-item-title {
  height: 50%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}
.hot-item-time {
  margin-top: 20px;
}

.image:hover {
  transform: scale(1.1);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
